<template>
    <div class="del-wrap">
        <slot></slot>
        <div v-if="props.showClose" class="icon-close" @click.stop="handleClose">
            <icon :size="12" name="el-icon-CloseBold"/>
        </div>
    </div>
</template>

<script lang="ts" setup>

import Icon from "@/components/icon/index.vue";


const props = withDefaults(defineProps<{
    showClose?: boolean
}>(), {
    showClose: true
})

const emit = defineEmits(['close'])


const handleClose = () => {
    emit('close')
}

</script>

<style scoped lang="scss">
.del-wrap {
    position: relative;
    
    &:hover > .icon-close {
        display: flex;
    }
    
    .icon-close {
        display: none;
        position: absolute;
        top: -8px;
        right: -8px;
        width: 16px;
        height: 16px;
        background-color: rgba(0, 0, 0, 0.3);
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
    }
}
</style>
